<template>
  <view class="goods-box">
    <view class="img-box" @tap="onClick()">
      <c-img class="img" :src="attrs.smallImg" mode="aspectFill" />
    </view>
    <view class="goods-body" @tap="onClick()">
      <view class="goods-name row2">{{ attrs.goodsName }}</view>
      <view class="flex al-center">
        <view class="goods-price grow">
          <c-number :value="attrs.minPrice" class="color-danger bold" prefix="￥" />
          <c-number :value="attrs.msrp" :prefix-mini="false" class="color-gray mini text-del" prefix="￥" />
        </view>
        <view class="cart" v-if="props.showCart" @tap.stop="emit('cart', attrs)">
          <c-icon icon="cart"></c-icon>
        </view>
        <view class="cart" v-else>
          <c-icon icon="login"></c-icon>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { CImg, CNumber, CIcon } from '@/components';
import { View } from '@tarojs/components';
import { useRouter } from '@/hooks';
import { useAttrs } from 'vue';

const emit = defineEmits(['tap', 'cart']);

const props = defineProps({
  showCart: {
    type: Boolean,
    default: true
  }
});
const router = useRouter();

const attrs = useAttrs();

const onClick = () => {
  router.push('/pages/goods/info?id=' + attrs.id);
};
</script>
<style lang="scss">
.goods-box {
  --width: calc(100% / 2 - 10px);
  width: var(--width);
  background-color: var(--color-caption);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  .img-box {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    .img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
  .goods-body {
    padding: 12px 20px;
    .cart {
      padding: 10px 0 10px 20px;
    }
    .goods-name {
      margin-bottom: 18px;
      font-size: 32px;
    }
    .goods-price {
      font-size: 36px;

      .mini {
        font-size: 26px;
        margin-left: 10px;
      }
    }
  }
}
</style>
